<script lang="ts" setup>
import type { VxeGridProps } from '#/adapter/vxe-table';

import { defineEmits, defineExpose, defineProps, ref, watch } from 'vue';

import { Input, Select } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import DictTag from '#/components/dict-tag/dict-tag.vue';

interface DictOption {
  nodeCode?: string;
  type?: string;
  num: number;
}

interface Props {
  num?: number;
  value?: DictOption[];
  disabled?: boolean;
}
interface Emits {
  (e: 'update:value', value: DictOption[]): void;
}
const props = defineProps<Props>();
const emit = defineEmits<Emits>();
const tableData = ref<DictOption[]>([]);
// 将表格数据转换为数组格式
const setOptions = (data: DictOption[], num?: number) => {
  let list = [];
  if (num <= 0 || num === data.length) {
    list = data || [];
  }
  if (num > list.length) {
    for (let i = list.length; i < num; i++) {
      list.push({
        nodeCode: '',
        type: undefined,
        num: i + 1,
      });
    }
  }
  if (num < list.length) {
    // 截断数组，保留前num个元素
    list = list.slice(0, num);
  }
  tableData.value = list;
  gridApi.setGridOptions({ data: list });
};

// 表格配置
const gridOptions: VxeGridProps<DictOption> = {
  columns: [
    {
      field: 'nodeCode',
      title: '节点编码',
      visible: false,
    },
    {
      field: 'num',
      title: '第几级审核',
      minWidth: '100',
    },
    {
      field: 'type',
      title: '流转类型',
      minWidth: '100',
      slots: { default: 'type' },
    },
    {
      field: 'alias',
      title: '节点名称',
      minWidth: '100',
      slots: { default: 'alias' },
    },
  ],
  data: [] as DictOption[],
  editConfig: {
    mode: 'row',
    trigger: 'click',
    showStatus: true,
  },
  height: 400,
  keepSource: true,
  showOverflow: true,
  autoResize: true,
  rowConfig: {
    keyField: 'num',
  },
  toolbarConfig: {
    slots: {
      buttons: 'toolbar_buttons',
    },
  },
  pagerConfig: {
    enabled: false,
  },
};
const options = ref([
  {
    value: 1,
    label: '本部门审核',
  },
  {
    value: 2,
    label: '本单位审核',
  },
  {
    value: 3,
    label: '主管单位审核',
  },
  {
    value: 4,
    label: '上级单位审核',
  },
  {
    value: 5,
    label: '本人审核',
  },
  {
    value: 6,
    label: '上级领导审核',
  },
  {
    value: 7,
    label: '本单位内自由选择',
  },
  {
    value: 8,
    label: '上级单位自由选择',
  },
  {
    value: 9,
    label: '全部自由选择',
  },
]);

const [Grid, gridApi] = useVbenVxeGrid({
  gridOptions,
});
const getTableData = async () => {
  return tableData.value;
};
const onTypeChange = (type: string, row: DictOption) => {
  tableData.value = tableData.value.map((item) => {
    if (item.num === row.num) {
      return { ...row, type };
    }
    return item;
  });
};
const onAliasChange = (alias: any, row: DictOption) => {
  tableData.value = tableData.value.map((item) => {
    if (item.num === row.num) {
      return { ...row, alias: alias?.target?._value };
    }
    return item;
  });
};
// 监听value变化，刷新表格数据
watch(
  () => props.num,
  (newValue) => {
    // 如果已经是数组，直接使用；如果是字符串，解析后使用
    setOptions(props.value || [], newValue);
  },
  { immediate: true },
);
watch(
  () => props.value,
  (newValue) => {
    // 如果已经是数组，直接使用；如果是字符串，解析后使用
    setOptions(newValue || [], props.num);
  },
  { immediate: true },
);
/** 暴露出表单校验方法和表单值获取方法 */
defineExpose({
  getValues: async () => await getTableData(),
});
</script>

<template>
  <div>
    <Grid table-title="简单审核节点设置">
      <!-- 操作列 -->
      <template #type="{ row }">
        <Select
          style="width: 100%"
          v-model:value="row.type"
          :options="options"
          :value="row.type"
          v-if="!props.disabled"
          @change="(val) => onTypeChange(val, row)"
        />
        <DictTag v-else :value="row.type" :options="options" />
      </template>
      <template #alias="{ row }">
        <Input
          v-if="!props.disabled"
          :value="row.alias"
          v-model:value="row.alias"
          @change="(val) => onAliasChange(val, row)"
        />
        <span v-else>{{ row.alias }}</span>
      </template>
    </Grid>
  </div>
</template>

<style scoped></style>
